/**
 * 新帧动画系统测试页面
 *
 * 测试基于 useFrameAnimationController 的全新帧动画组件
 * 参考 test_tab_page.tsx 的组织方式，每个功能点独立成示例组件
 */

import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import { VoicePlayingAnimation, TypingAnimation } from './components/AnimatedComponents';
import { SafeAreaView } from 'react-native-safe-area-context';

// ==================== 示例1: VoicePlayingAnimation 基础用法 ====================
const BasicVoiceExample: React.FC = () => {
  const [playing, setPlaying] = useState(false);

  return (
    <View style={styles.exampleContainer}>
      <Text style={styles.exampleTitle}>示例1: 语音播放动画 - 基础用法</Text>
      <View style={styles.content}>
        <Text style={styles.description}>
          VoicePlayingAnimation 组件用于显示音频播放状态
        </Text>
        
        <View style={styles.demoRow}>
          <View style={styles.animationBox}>
            <VoicePlayingAnimation
              playing={playing}
              size="medium"
              color="#007AFF"
              frameDuration={200}
            />
          </View>
          <TouchableOpacity
            style={[styles.controlButton, playing && styles.controlButtonActive]}
            onPress={() => setPlaying(!playing)}
          >
            <Text style={styles.controlButtonText}>
              {playing ? '⏸ 停止' : '▶️ 播放'}
            </Text>
          </TouchableOpacity>
        </View>

        <Text style={styles.hint}>
          💡 点击按钮控制播放状态
        </Text>
      </View>
    </View>
  );
};

// ==================== 示例2: VoicePlayingAnimation 尺寸变体 ====================
const VoiceSizeVariantsExample: React.FC = () => {
  const [playing, setPlaying] = useState(false);

  return (
    <View style={styles.exampleContainer}>
      <Text style={styles.exampleTitle}>示例2: 语音播放动画 - 不同尺寸</Text>
      <View style={styles.content}>
        <Text style={styles.description}>
          支持 small、medium、large 三种预设尺寸
        </Text>

        <View style={styles.variantRow}>
          <View style={styles.variantItem}>
            <Text style={styles.variantLabel}>Small</Text>
            <View style={styles.animationBox}>
              <VoicePlayingAnimation
                playing={playing}
                size="small"
                color="#007AFF"
                frameDuration={200}
              />
            </View>
          </View>

          <View style={styles.variantItem}>
            <Text style={styles.variantLabel}>Medium</Text>
            <View style={styles.animationBox}>
              <VoicePlayingAnimation
                playing={playing}
                size="medium"
                color="#34C759"
                frameDuration={200}
              />
            </View>
          </View>

          <View style={styles.variantItem}>
            <Text style={styles.variantLabel}>Large</Text>
            <View style={styles.animationBox}>
              <VoicePlayingAnimation
                playing={playing}
                size="large"
                color="#FF3B30"
                frameDuration={200}
              />
            </View>
          </View>
        </View>

        <TouchableOpacity
          style={[styles.controlButton, playing && styles.controlButtonActive]}
          onPress={() => setPlaying(!playing)}
        >
          <Text style={styles.controlButtonText}>
            {playing ? '⏸ 停止全部' : '▶️ 播放全部'}
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

// ==================== 示例3: VoicePlayingAnimation 自定义配置 ====================
const VoiceCustomConfigExample: React.FC = () => {
  const [playing1, setPlaying1] = useState(false);
  const [playing2, setPlaying2] = useState(false);

  return (
    <View style={styles.exampleContainer}>
      <Text style={styles.exampleTitle}>示例3: 语音播放动画 - 自定义配置</Text>
      <View style={styles.content}>
        <Text style={styles.description}>
          可以自定义条形宽度、最大高度、间距、速度等
        </Text>

        {/* 配置1: 细长快速 */}
        <View style={styles.configItem}>
          <View style={styles.configHeader}>
            <Text style={styles.configTitle}>细长快速</Text>
            <TouchableOpacity
              style={[styles.miniButton, playing1 && styles.miniButtonActive]}
              onPress={() => setPlaying1(!playing1)}
            >
              <Text style={styles.miniButtonText}>
                {playing1 ? '停止' : '播放'}
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.animationBox}>
            <VoicePlayingAnimation
              playing={playing1}
              color="#FF9500"
              barWidth={3}
              maxHeight={40}
              gap={4}
              frameDuration={150}
            />
          </View>
          <Text style={styles.configDesc}>
            barWidth=3, maxHeight=40, gap=4, frameDuration=150
          </Text>
        </View>

        {/* 配置2: 粗短慢速 */}
        <View style={styles.configItem}>
          <View style={styles.configHeader}>
            <Text style={styles.configTitle}>粗短慢速</Text>
            <TouchableOpacity
              style={[styles.miniButton, playing2 && styles.miniButtonActive]}
              onPress={() => setPlaying2(!playing2)}
            >
              <Text style={styles.miniButtonText}>
                {playing2 ? '停止' : '播放'}
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.animationBox}>
            <VoicePlayingAnimation
              playing={playing2}
              color="#AF52DE"
              barWidth={6}
              maxHeight={20}
              gap={8}
              frameDuration={300}
            />
          </View>
          <Text style={styles.configDesc}>
            barWidth=6, maxHeight=20, gap=8, frameDuration=300
          </Text>
        </View>
      </View>
    </View>
  );
};

// ==================== 示例4: TypingAnimation 基础用法 ====================
const BasicTypingExample: React.FC = () => {
  const [playing, setPlaying] = useState(false);

  return (
    <View style={styles.exampleContainer}>
      <Text style={styles.exampleTitle}>示例4: 正在输入动画 - 基础用法</Text>
      <View style={styles.content}>
        <Text style={styles.description}>
          TypingAnimation 组件用于显示"正在输入"状态
        </Text>
        
        <View style={styles.demoRow}>
          <View style={styles.animationBox}>
            <TypingAnimation
              playing={playing}
              size="medium"
              color="#999999"
              frameDuration={300}
            />
          </View>
          <TouchableOpacity
            style={[styles.controlButton, playing && styles.controlButtonActive]}
            onPress={() => setPlaying(!playing)}
          >
            <Text style={styles.controlButtonText}>
              {playing ? '⏸ 停止' : '▶️ 播放'}
            </Text>
          </TouchableOpacity>
        </View>

        <Text style={styles.hint}>
          💡 通过透明度变化模拟打字效果
        </Text>
      </View>
    </View>
  );
};

// ==================== 示例5: TypingAnimation 尺寸和颜色变体 ====================
const TypingVariantsExample: React.FC = () => {
  const [playing, setPlaying] = useState(false);

  return (
    <View style={styles.exampleContainer}>
      <Text style={styles.exampleTitle}>示例5: 正在输入动画 - 尺寸和颜色</Text>
      <View style={styles.content}>
        <Text style={styles.description}>
          不同尺寸和颜色的组合
        </Text>

        <View style={styles.variantRow}>
          <View style={styles.variantItem}>
            <Text style={styles.variantLabel}>小 · 灰</Text>
            <View style={styles.animationBox}>
              <TypingAnimation
                playing={playing}
                size="small"
                color="#999999"
                frameDuration={300}
              />
            </View>
          </View>

          <View style={styles.variantItem}>
            <Text style={styles.variantLabel}>中 · 蓝</Text>
            <View style={styles.animationBox}>
              <TypingAnimation
                playing={playing}
                size="medium"
                color="#007AFF"
                frameDuration={250}
              />
            </View>
          </View>

          <View style={styles.variantItem}>
            <Text style={styles.variantLabel}>大 · 紫</Text>
            <View style={styles.animationBox}>
              <TypingAnimation
                playing={playing}
                size="large"
                color="#AF52DE"
                frameDuration={200}
              />
            </View>
          </View>
        </View>

        <TouchableOpacity
          style={[styles.controlButton, playing && styles.controlButtonActive]}
          onPress={() => setPlaying(!playing)}
        >
          <Text style={styles.controlButtonText}>
            {playing ? '⏸ 停止全部' : '▶️ 播放全部'}
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

// ==================== 示例6: TypingAnimation 自定义透明度 ====================
const TypingCustomOpacityExample: React.FC = () => {
  const [playing1, setPlaying1] = useState(false);
  const [playing2, setPlaying2] = useState(false);

  return (
    <View style={styles.exampleContainer}>
      <Text style={styles.exampleTitle}>示例6: 正在输入动画 - 自定义透明度</Text>
      <View style={styles.content}>
        <Text style={styles.description}>
          调整活跃和暗淡状态的透明度
        </Text>

        {/* 配置1: 高对比度 */}
        <View style={styles.configItem}>
          <View style={styles.configHeader}>
            <Text style={styles.configTitle}>高对比度（1.0 - 0.1）</Text>
            <TouchableOpacity
              style={[styles.miniButton, playing1 && styles.miniButtonActive]}
              onPress={() => setPlaying1(!playing1)}
            >
              <Text style={styles.miniButtonText}>
                {playing1 ? '停止' : '播放'}
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.animationBox}>
            <TypingAnimation
              playing={playing1}
              color="#34C759"
              dotSize={10}
              gap={6}
              activeOpacity={1.0}
              inactiveOpacity={0.1}
              frameDuration={280}
            />
          </View>
        </View>

        {/* 配置2: 低对比度 */}
        <View style={styles.configItem}>
          <View style={styles.configHeader}>
            <Text style={styles.configTitle}>低对比度（0.8 - 0.4）</Text>
            <TouchableOpacity
              style={[styles.miniButton, playing2 && styles.miniButtonActive]}
              onPress={() => setPlaying2(!playing2)}
            >
              <Text style={styles.miniButtonText}>
                {playing2 ? '停止' : '播放'}
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.animationBox}>
            <TypingAnimation
              playing={playing2}
              color="#FF9500"
              dotSize={12}
              gap={8}
              activeOpacity={0.8}
              inactiveOpacity={0.4}
              frameDuration={250}
            />
          </View>
        </View>
      </View>
    </View>
  );
};

// ==================== 示例7: 聊天场景模拟 ====================
const ChatScenarioExample: React.FC = () => {
  const [voicePlaying, setVoicePlaying] = useState(false);
  const [isTyping, setIsTyping] = useState(true);

  return (
    <View style={styles.exampleContainer}>
      <Text style={styles.exampleTitle}>示例7: 聊天场景模拟</Text>
      <View style={styles.content}>
        <Text style={styles.description}>
          在真实聊天界面中的应用示例
        </Text>

        {/* 语音消息气泡 */}
        <View style={styles.chatSection}>
          <Text style={styles.chatLabel}>语音消息</Text>
          <TouchableOpacity
            style={styles.voiceBubble}
            onPress={() => setVoicePlaying(!voicePlaying)}
            activeOpacity={0.7}
          >
            <VoicePlayingAnimation
              playing={voicePlaying}
              size="small"
              color="#FFFFFF"
              frameDuration={200}
            />
            <Text style={styles.voiceDuration}>5"</Text>
          </TouchableOpacity>
          <Text style={styles.chatHint}>
            点击播放/暂停语音
          </Text>
        </View>

        {/* 正在输入提示 */}
        <View style={styles.chatSection}>
          <Text style={styles.chatLabel}>对方正在输入</Text>
          <View style={styles.typingBubble}>
            <TypingAnimation
              playing={isTyping}
              size="small"
              color="#999999"
              frameDuration={300}
            />
          </View>
          <TouchableOpacity
            style={styles.toggleButton}
            onPress={() => setIsTyping(!isTyping)}
          >
            <Text style={styles.toggleButtonText}>
              {isTyping ? '关闭' : '开启'} 输入动画
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};

// ==================== 示例8: 性能和设计优势 ====================
const PerformanceInfoExample: React.FC = () => {
  const [playing, setPlaying] = useState(false);

  return (
    <View style={styles.exampleContainer}>
      <Text style={styles.exampleTitle}>示例8: 性能和设计优势</Text>
      <View style={styles.content}>
        <View style={styles.performanceDemo}>
          <Text style={styles.performanceDemoTitle}>性能测试</Text>
          <View style={styles.animationBox}>
            <VoicePlayingAnimation
              playing={playing}
              size="medium"
              color="#007AFF"
              frameDuration={200}
            />
          </View>
          <TouchableOpacity
            style={[styles.controlButton, playing && styles.controlButtonActive]}
            onPress={() => setPlaying(!playing)}
          >
            <Text style={styles.controlButtonText}>
              {playing ? '⏸ 停止' : '▶️ 播放'}
            </Text>
          </TouchableOpacity>
        </View>

        <View style={styles.featureList}>
          <Text style={styles.featureTitle}>✨ 技术优势</Text>
          <View style={styles.featureItem}>
            <Text style={styles.featureDot}>•</Text>
            <Text style={styles.featureText}>
              基于 Animated API，使用原生动画驱动
            </Text>
          </View>
          <View style={styles.featureItem}>
            <Text style={styles.featureDot}>•</Text>
            <Text style={styles.featureText}>
              CPU 占用恒定，不随帧率提升而增加
            </Text>
          </View>
          <View style={styles.featureItem}>
            <Text style={styles.featureDot}>•</Text>
            <Text style={styles.featureText}>
              使用 interpolate 实现平滑插值
            </Text>
          </View>
          <View style={styles.featureItem}>
            <Text style={styles.featureDot}>•</Text>
            <Text style={styles.featureText}>
              支持原生驱动（useNativeDriver）
            </Text>
          </View>
          <View style={styles.featureItem}>
            <Text style={styles.featureDot}>•</Text>
            <Text style={styles.featureText}>
              Hook 管理通用逻辑，组件专注业务
            </Text>
          </View>
          <View style={styles.featureItem}>
            <Text style={styles.featureDot}>•</Text>
            <Text style={styles.featureText}>
              TypeScript 类型安全，易于扩展
            </Text>
          </View>
        </View>
      </View>
    </View>
  );
};

// ==================== 主入口 ====================
export function TestNewFrameAnimation() {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollContainer}>
        <View style={styles.header}>
          <Text style={styles.headerTitle}>帧动画组件示例</Text>
          <Text style={styles.headerSubtitle}>
            基于 useFrameAnimationController
          </Text>
        </View>

        <BasicVoiceExample />
        <VoiceSizeVariantsExample />
        <VoiceCustomConfigExample />
        <BasicTypingExample />
        <TypingVariantsExample />
        <TypingCustomOpacityExample />
        <ChatScenarioExample />
        <PerformanceInfoExample />

        <View style={styles.footer}>
          <Text style={styles.footerText}>
            ✨ 所有动画均使用 React Native Animated API 实现，性能优异
          </Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

// ==================== 样式定义 ====================
const styles = StyleSheet.create({
  // 主容器样式
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  scrollContainer: {
    flex: 1,
  },
  header: {
    padding: 20,
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  headerTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333333',
    marginBottom: 4,
  },
  headerSubtitle: {
    fontSize: 14,
    color: '#666666',
  },
  
  // 示例容器样式
  exampleContainer: {
    marginTop: 20,
    backgroundColor: '#ffffff',
    borderRadius: 8,
    marginHorizontal: 16,
    overflow: 'hidden',
  },
  exampleTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333333',
    padding: 12,
    backgroundColor: '#f9f9f9',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  content: {
    padding: 16,
  },
  description: {
    fontSize: 14,
    color: '#666666',
    marginBottom: 16,
    lineHeight: 20,
  },
  hint: {
    fontSize: 12,
    color: '#999999',
    marginTop: 12,
    fontStyle: 'italic',
  },
  
  // 演示行样式
  demoRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  animationBox: {
    minWidth: 80,
    minHeight: 50,
    backgroundColor: '#f8f8f8',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#e0e0e0',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 12,
  },
  
  // 控制按钮样式
  controlButton: {
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 8,
    backgroundColor: '#007AFF',
    flex: 1,
    alignItems: 'center',
  },
  controlButtonActive: {
    backgroundColor: '#FF3B30',
  },
  controlButtonText: {
    color: '#ffffff',
    fontSize: 14,
    fontWeight: '600',
  },
  
  // 变体展示样式
  variantRow: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginBottom: 16,
  },
  variantItem: {
    alignItems: 'center',
    flex: 1,
  },
  variantLabel: {
    fontSize: 12,
    color: '#999999',
    marginBottom: 8,
  },
  
  // 配置项样式
  configItem: {
    marginBottom: 20,
    padding: 12,
    backgroundColor: '#f9f9f9',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#e0e0e0',
  },
  configHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 12,
  },
  configTitle: {
    fontSize: 14,
    fontWeight: '600',
    color: '#333333',
  },
  configDesc: {
    fontSize: 11,
    color: '#999999',
    marginTop: 8,
    fontFamily: 'Courier',
  },
  
  // 迷你按钮样式
  miniButton: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 6,
    backgroundColor: '#007AFF',
  },
  miniButtonActive: {
    backgroundColor: '#FF3B30',
  },
  miniButtonText: {
    color: '#ffffff',
    fontSize: 12,
    fontWeight: '600',
  },
  
  // 聊天场景样式
  chatSection: {
    marginBottom: 20,
  },
  chatLabel: {
    fontSize: 13,
    color: '#666666',
    marginBottom: 8,
  },
  voiceBubble: {
    backgroundColor: '#007AFF',
    borderRadius: 16,
    padding: 12,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    alignSelf: 'flex-start',
  },
  voiceDuration: {
    color: '#ffffff',
    fontSize: 14,
    fontWeight: '600',
  },
  typingBubble: {
    backgroundColor: '#E5E5EA',
    borderRadius: 16,
    paddingHorizontal: 16,
    paddingVertical: 12,
    alignSelf: 'flex-start',
    marginBottom: 8,
  },
  chatHint: {
    fontSize: 11,
    color: '#999999',
    marginTop: 4,
  },
  toggleButton: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 6,
    backgroundColor: '#E5E5EA',
    alignSelf: 'flex-start',
  },
  toggleButtonText: {
    color: '#007AFF',
    fontSize: 12,
    fontWeight: '600',
  },
  
  // 性能演示样式
  performanceDemo: {
    alignItems: 'center',
    marginBottom: 20,
    padding: 16,
    backgroundColor: '#f9f9f9',
    borderRadius: 8,
  },
  performanceDemoTitle: {
    fontSize: 14,
    fontWeight: '600',
    color: '#333333',
    marginBottom: 12,
  },
  featureList: {
    backgroundColor: '#f0f8ff',
    padding: 16,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#d0e8ff',
  },
  featureTitle: {
    fontSize: 15,
    fontWeight: '600',
    color: '#333333',
    marginBottom: 12,
  },
  featureItem: {
    flexDirection: 'row',
    marginBottom: 8,
  },
  featureDot: {
    fontSize: 14,
    color: '#007AFF',
    marginRight: 8,
    width: 20,
  },
  featureText: {
    flex: 1,
    fontSize: 13,
    color: '#666666',
    lineHeight: 20,
  },
  
  // 页脚样式
  footer: {
    padding: 20,
    alignItems: 'center',
    marginTop: 20,
    marginBottom: 40,
  },
  footerText: {
    fontSize: 13,
    color: '#999999',
    textAlign: 'center',
  },
});

